﻿<template>
	<div class="card-fill layout-padding" v-loading="loading" element-loading-text="Loading...">
		<WtmSearcher v-if="searchBar" v-model="searchData" @search="getTableData">
			<template #primary="{ showAdvanced }">
				<el-row :gutter="15">
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="StaffNo_FormItem" prop="StaffNo">
							<template #label>
								<WtmLabelTooltip label="员工工号" tooltip="员工工号" />
							</template>
							<el-input v-model="searchData.StaffNo" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="Name_FormItem" prop="Name">
							<template #label>
								<WtmLabelTooltip label="员工姓名" tooltip="员工姓名" />
							</template>
							<el-input v-model="searchData.Name" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="OutFactoryTime_FormItem" prop="OutFactoryTime">
							<template #label>
								<WtmLabelTooltip label="出厂时间" tooltip="出厂时间" />
							</template>
							<el-date-picker type="daterange" v-model="searchData.OutFactoryTime" clearable></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="ExpectedReturnTime_FormItem" prop="ExpectedReturnTime">
							<template #label>
								<WtmLabelTooltip label="预计返回时间" tooltip="预计返回时间" />
							</template>
							<el-date-picker type="daterange" v-model="searchData.ExpectedReturnTime" clearable></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
						<el-form-item ref="Reason_FormItem" prop="Reason">
							<template #label>
								<WtmLabelTooltip label="事由" tooltip="事由" />
							</template>
							<el-input v-model="searchData.Reason" clearable></el-input>
						</el-form-item>
					</el-col>
					<template v-if="showAdvanced">
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="Approver_FormItem" prop="Approver">
								<template #label>
									<WtmLabelTooltip label="审批人" tooltip="流程审批人" />
								</template>
								<el-input v-model="searchData.Approver" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="ApprovalTime_FormItem" prop="ApprovalTime">
								<template #label>
									<WtmLabelTooltip label="审批时间" tooltip="流程审批时间" />
								</template>
								<el-date-picker type="daterange" v-model="searchData.ApprovalTime" clearable></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="GroupId_FormItem" prop="GroupId">
								<template #label>
									<WtmLabelTooltip label="所属部门" tooltip="关联的部门" />
								</template>
								<el-select v-model="searchData.GroupId" :data="stateData.AllSysGroups" clearable>
									<el-option v-for="item in stateData.AllSysGroups" :key="item.Value" :value="item.Value" :label="item.Text"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="BillCode_FormItem" prop="BillCode">
								<template #label>
									<WtmLabelTooltip label="单据编号" tooltip="单据编号" />
								</template>
								<el-input v-model="searchData.BillCode" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="BillStatus_FormItem" prop="BillStatus">
								<template #label>
									<WtmLabelTooltip label="单据状态" tooltip="单据状态" />
								</template>
								<el-select v-model="searchData.BillStatus" clearable>
									<el-option key="草稿" value="草稿" label="草稿"></el-option>
									<el-option key="正文" value="正文" label="正文"></el-option
								></el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb15">
							<el-form-item ref="WorkflowStatus_FormItem" prop="WorkflowStatus">
								<template #label>
									<WtmLabelTooltip label="工作流状态" tooltip="工作流状态" />
								</template>
								<el-select v-model="searchData.WorkflowStatus" clearable>
									<el-option key="待提交" value="待提交" label="待提交"></el-option>
									<el-option key="提交中" value="提交中" label="提交中"></el-option>
									<el-option key="审核中" value="审核中" label="审核中"></el-option>
									<el-option key="已完成" value="已完成" label="已完成"></el-option>
									<el-option key="已取消" value="已取消" label="已取消"></el-option
								></el-select>
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</template>
		</WtmSearcher>

		<div v-if="toolbar">
			<WtmButton
				v-auth="API_PERMISSIONS.ADD"
				icon="fa fa-plus"
				type="primary"
				:button-text="$t('message._system.common.vm.add')"
				@click="OnCreateClick()"
			/>
			<WtmButton
				v-auth="API_PERMISSIONS.BATCH_DELETE"
				icon="fa fa-trash"
				type="danger"
				:button-text="$t('message._system.common.vm.batchdelete')"
				:disabled="!hasSelectedRows"
				:confirm="$t('message._system.common.vm.deletetip')"
				@click="onBatchDelete()"
			/>
			<WtmButton
				v-auth="API_PERMISSIONS.IMPORT"
				icon="fa fa-tasks"
				type="primary"
				:button-text="$t('message._system.common.vm.import')"
				@click="OnImportClick()"
			/>
			<WtmButton
				v-auth="API_PERMISSIONS.EXPORT"
				icon="fa fa-arrow-circle-down"
				type="primary"
				:button-text="$t('message._system.common.vm.export')"
				@click="onExport()"
			/>
		</div>

		<WtmTable ref="tableRef" v-bind="tableData" class="table-operation-area">
			<template #operation>
				<el-table-column :label="$t('message._system.common.vm.operate')" min-width="180" align="center" class-name="operation-column">
					<template v-slot="scope">
						<div class="operation-container">
							<WtmButton
								v-auth="API_PERMISSIONS.EDIT"
								v-if="canEdit(scope.row)"
								:is-text="true"
								icon="fa fa-pencil-square"
								type="warning"
								:button-text="$t('message._system.common.vm.edit')"
								@click="OnEditRowClick(scope.row)"
							/>
							<WtmButton
								v-if="canApprove(scope.row)"
								:is-text="true"
								icon="-o"
								type="warning"
								button-text="审批"
								@click="OnDetailsRowClick(scope.row)"
							/>
							<WtmButton
								v-else
								v-auth="API_PERMISSIONS.DETAIL"
								:is-text="true"
								icon="fa fa-info-circle"
								type="info"
								:button-text="$t('message._system.common.vm.detail')"
								@click="OnDetailsRowClick(scope.row)"
							/>
							<WtmButton
								v-auth="API_PERMISSIONS.BATCH_DELETE"
								v-if="canDelete(scope.row)"
								icon="fa fa-trash"
								type="danger"
								:button-text="$t('message._system.common.vm.delete')"
								:confirm="$t('message._system.common.vm.deletetip')"
								:is-text="true"
								@click="onDelete(scope.row)"
							/>
						</div>
					</template>
				</el-table-column>
			</template>
		</WtmTable>
	</div>
</template>

<script setup lang="ts" name="出厂申请;true;HengTong.Areas.Daily.Controllers;SysDailyOutFactoryRequestBill">
import ElMessage from 'element-plus/es/components/message/index';
import { defineAsyncComponent, reactive, ref, getCurrentInstance, onMounted, computed, type ComponentInternalInstance } from 'vue';
import { SysDailyOutFactoryRequestBillApi as api } from '/@/views/daily/sysdailyoutfactoryrequestbill/api';
import { ISysDailyOutFactoryRequestBillView, ISysDailyOutFactoryRequestBillQuery } from '/@/views/daily/sysdailyoutfactoryrequestbill/api/interface';
import other from '/@/utils/other';

/**
 * ===== 常量定义区域 =====
 * 统一管理业务常量，便于维护和复用
 */

/** 单据状态枚举 */
const BILL_STATUS = {
	DRAFT: '草稿', // 草稿状态，可编辑
	FORMAL: '正文', // 正式状态，不可编辑
} as const;

/** 工作流状态枚举 */
const WORKFLOW_STATUS = {
	PENDING: '待提交', // 初始状态，等待提交
	SUBMITTING: '提交中', // 正在提交流程
	IN_AUDIT: '审核中', // 审批流程中
	COMPLETED: '已完成', // 流程完成
	CANCELLED: '已取消', // 流程取消
} as const;

/**
 * ===== API权限路径常量 =====
 * 统一管理权限控制路径，便于权限系统集成
 */
const API_PERMISSIONS = {
	ADD: '/api/SysDailyOutFactoryRequestBill/Add', // 新增权限
	EDIT: '/api/SysDailyOutFactoryRequestBill/Edit', // 编辑权限
	DETAIL: '/api/SysDailyOutFactoryRequestBill/{id}', // 查看详情权限
	BATCH_DELETE: '/api/SysDailyOutFactoryRequestBill/BatchDelete', // 批量删除权限
	IMPORT: '/api/SysDailyOutFactoryRequestBill/Import', // 数据导入权限
	EXPORT: '/api/SysDailyOutFactoryRequestBill/SysDailyOutFactoryRequestBillExportExcel', // 数据导出权限
} as const;

/**
 * ===== API端点常量 =====
 * 统一管理API调用地址
 */
const API_ENDPOINTS = {
	GROUPS: '/api/SysDailyOutFactoryRequestBill/GetSysGroups', // 获取部门组织数据接口
} as const;

/**
 * ===== 组件实例和基础配置 =====
 */

/** 组件实例，用于访问组件上下文 */
const ci = getCurrentInstance() as ComponentInternalInstance;

/** 页面加载状态控制 */
const loading = ref(false);

/**
 * ===== 懒加载对话框组件 =====
 * 按需加载，优化首屏性能
 */
const CreateDialog = defineAsyncComponent(() => import('./create.vue')); // 新增对话框
const EditDialog = defineAsyncComponent(() => import('./edit.vue')); // 编辑对话框
const DetailsDialog = defineAsyncComponent(() => import('./details.vue')); // 详情对话框
const ImportDialog = defineAsyncComponent(() => import('./import.vue')); // 导入对话框

/**
 * ===== 组件属性定义 =====
 * 定义组件可接收的外部参数
 */
const props = withDefaults(
	defineProps<{
		/** 是否显示搜索(筛选)栏 */
		searchBar?: boolean;
		/** 是否显示工具栏 */
		toolbar?: boolean;
		/** 是否禁用表格任何操作 */
		isDisabled?: boolean;
		/** 默认筛选条件 */
		filters?: ISysDailyOutFactoryRequestBillQuery;
		/** 主表ID，用于关联查询 */
		entityId?: string | null;
	}>(),
	{
		searchBar: true, // 默认显示搜索栏
		toolbar: true, // 默认显示工具栏
		isDisabled: true, // 默认启用操作功能
		filters: () => ({}), // 默认无筛选条件
		entityId: null, // 默认无关联主表
	}
);

/**
 * ===== 响应式状态数据 =====
 */

/** 页面状态数据 */
const stateData = reactive({
	AllSysGroups: [] as any[], // 所有部门组织数据，用于下拉选择
});

/** 搜索表单数据 */
const searchData = ref<ISysDailyOutFactoryRequestBillQuery>({});

/** 表格组件引用 */
const tableRef = ref();

/**
 * ===== 表格配置 =====
 * 定义表格的数据结构、列头配置和显示选项
 */
const tableData = ref({
	// 表格行数据，由API返回填充
	data: [],

	// 表格列头配置
	header: [
		{ title: '员工工号', key: 'StaffNo', type: 'text', isCheck: true },
		{ title: '员工姓名', key: 'Name', type: 'text', isCheck: true },
		{ title: '出厂时间', key: 'OutFactoryTime', type: 'text', isCheck: true },
		{ title: '预计返回时间', key: 'ExpectedReturnTime', type: 'text', isCheck: true },
		{ title: '事由', key: 'Reason', type: 'text', isCheck: true },
		{ title: '审批人', key: 'Approver', type: 'text', isCheck: true },
		{ title: '审批时间', key: 'ApprovalTime', type: 'text', isCheck: true },
		{ title: '所属部门', key: 'GroupName', type: 'text', isCheck: true },
		{ title: '单据编号', key: 'BillCode', type: 'text', isCheck: true },
		{ title: '单据状态', key: 'BillStatus', type: 'text', isCheck: true },
		{
			title: '工作流状态',
			key: 'WorkflowStatus',
			type: 'tag', // 使用标签样式显示
			isCheck: true,
			// 根据状态值返回对应的标签颜色类型
			tagType: (row: ISysDailyOutFactoryRequestBillView) => {
				const statusMap: Record<string, string> = {
					[WORKFLOW_STATUS.PENDING]: 'info', // 待提交：信息色
					[WORKFLOW_STATUS.SUBMITTING]: 'info', // 提交中：信息色
					[WORKFLOW_STATUS.IN_AUDIT]: 'warning', // 审核中：警告色
					[WORKFLOW_STATUS.COMPLETED]: 'success', // 已完成：成功色
					[WORKFLOW_STATUS.CANCELLED]: 'danger', // 已取消：危险色
				};
				return statusMap[row.WorkflowStatus || ''] || 'info';
			},
		},
		{ title: '备注', key: 'Remark', type: 'text', isCheck: true },
	],

	// 表格基础配置
	config: {
		total: 0, // 数据总条数，用于分页
		loading: true, // 加载状态
		isSerialNo: true, // 显示序号列
		isSelection: true, // 显示多选框列
		isOperate: props.isDisabled, // 显示操作列
	},
});

/**
 * ===== 计算属性 =====
 * 根据响应式数据动态计算衍生值
 */

/** 是否有选中的行数据 - 用于控制批量操作按钮状态 */
const hasSelectedRows = computed(() => {
	const selectedRows = tableRef.value?.getSelectedRows() || [];
	return selectedRows.length > 0;
});

/**
 * ===== 行操作权限判断函数 =====
 * 根据数据状态判断当前行是否可以执行特定操作
 */

/** 判断是否可以编辑 - 只有草稿状态才能编辑 */
const canEdit = (row: ISysDailyOutFactoryRequestBillView) => {
	return row.BillStatus === BILL_STATUS.DRAFT;
};

/** 判断是否可以审批 - 需要有审批权限 */
const canApprove = (row: ISysDailyOutFactoryRequestBillView) => {
	return (row as any).CanApprove === 'true';
};

/** 判断是否可以删除 - 只有草稿状态才能删除 */
const canDelete = (row: ISysDailyOutFactoryRequestBillView) => {
	return row.BillStatus === BILL_STATUS.DRAFT;
};

/**
 * ===== 工具函数 =====
 */

/** 统一的错误处理函数 - 处理API调用失败等错误情况 */
const handleError = (error: any) => {
	other.setFormError(ci, error);
};

/**
 * ===== 数据获取函数 =====
 */

/** 获取表格数据 - 调用搜索接口并更新表格 */
const getTableData = async () => {
	try {
		await tableRef.value.doSearch(api().search, searchData.value);
	} catch (error) {
		handleError(error);
	}
};

/**
 * ===== 对话框操作函数 =====
 * 打开各种功能对话框
 */

/** 打开新增对话框 */
const OnCreateClick = () => {
	other.openDialog(
		ci.proxy?.$t('message._system.common.vm.add') || '新增',
		CreateDialog,
		null,
		getTableData // 关闭对话框后刷新数据
	);
};

/** 打开编辑对话框 */
const OnEditRowClick = (row: ISysDailyOutFactoryRequestBillView) => {
	other.openDialog(
		ci.proxy?.$t('message._system.common.vm.edit') || '编辑',
		EditDialog,
		row, // 传入当前行数据
		getTableData // 关闭对话框后刷新数据
	);
};

/** 打开详情对话框 */
const OnDetailsRowClick = (row: ISysDailyOutFactoryRequestBillView) => {
	other.openDialog(
		ci.proxy?.$t('message._system.common.vm.detail') || '详情',
		DetailsDialog,
		row, // 传入当前行数据
		getTableData // 关闭对话框后刷新数据
	);
};

/** 打开导入对话框 */
const OnImportClick = () => {
	other.openDialog(
		ci.proxy?.$t('message._system.common.vm.import') || '导入',
		ImportDialog,
		null,
		getTableData // 关闭对话框后刷新数据
	);
};

/**
 * ===== 删除操作函数 =====
 */

/** 删除单条记录 */
const onDelete = async (row: ISysDailyOutFactoryRequestBillView) => {
	try {
		const ids = [row.ID] as (string | number)[];
		await api().delete(ids);
		await getTableData(); // 删除成功后刷新表格
	} catch (error) {
		handleError(error);
	}
};

/** 批量删除选中记录 */
const onBatchDelete = async () => {
	// 获取当前选中的行数据
	const selectedRows = tableRef.value?.getSelectedRows();
	const selectedIds = selectedRows?.map((x: ISysDailyOutFactoryRequestBillView) => x.ID) as (string | number)[];

	// 验证是否有选中数据
	if (!selectedIds || selectedIds.length === 0) {
		ElMessage.error(ci.proxy?.$t('message._system.common.vm.check') || '请选择要删除的数据');
		return;
	}

	try {
		await api().delete(selectedIds);
		tableRef.value?.clearSelection(); // 清除选择状态
		await getTableData(); // 刷新表格数据
		ElMessage.success('删除成功');
	} catch (error) {
		ElMessage.error(ci.proxy?.$t('message._system.common.vm.error') || '删除失败');
		handleError(error);
	}
};

/**
 * ===== 导出操作函数 =====
 */

/** 导出数据 - 根据是否有选中数据决定导出范围 */
const onExport = () => {
	const selected = tableRef.value.getSelectedRows();
	if (selected.length > 0) {
		// 导出选中的数据
		api().exportById(selected.map((x: any) => x.ID));
	} else {
		// 导出所有数据（根据当前搜索条件）
		api().export({});
	}
};

/**
 * ===== 页面初始化函数 =====
 */

/** 加载页面所需的所有数据 */
const loadPageData = async () => {
	// 并行加载部门数据和表格数据
	const [groups, tableData] = await Promise.allSettled([
		other.getSelectList(API_ENDPOINTS.GROUPS, [], false), // 获取部门组织数据
		getTableData(), // 获取表格数据
	]);

	// 处理成功的结果
	if (groups.status === 'fulfilled') {
		stateData.AllSysGroups = groups.value;
	}

	// 如果表格数据加载失败，记录错误但不阻止页面渲染
	if (tableData.status === 'rejected') {
		console.error('加载表格数据失败:', tableData.reason);
	}
};

/**
 * ===== 生命周期钩子 =====
 */

/** 组件挂载时执行 - 初始化页面数据 */
onMounted(async () => {
	loading.value = true;

	try {
		await loadPageData();
	} catch (error) {
		handleError(error);
	} finally {
		loading.value = false; // 无论成功失败都要关闭loading
	}
});
</script>
